import {memo} from 'react'
import s from './index.module.scss'
import NavigationBar from "components/NavigationBar";
import Placeholder from "components/Placeholder";
import AlbumCard from "./items/AlbumCard";
import JSCore from "./items/JSCore";

// 添加数据库的 JSON 模板
export const __album = {
  author: '这波能反杀',
  author_id: '5ca5d267660e440105cb67f46db8efe6',
  like: '344',
  name: '微信小程序项目实战'
}

interface AlbumProps {
  selected: boolean,
  initialize: boolean
}

const albums = [{
  _id: '6e4509e96634404d0028fe4f3c333c71',
  title: 'React 19 全解'
}, {
  _id: '06019505660e443805c923947606fe9a',
  title: 'React 知命境'
}, {
  _id: 'b787f7c366345ff1002a1b8d5851a5d7',
  title: 'JavaScript 核心进阶'
}, {
  _id: 'c45ba8cc663460d00025c6010ee7e0fd',
  title: 'HarmonyOS 速成'
}, {
  _id: '8212c3bc66346078002612556b58de36',
  title: 'TypeScript 专题'
}, {
  _id: '9fe3c0fd663460950029fb0e25bc48b9',
  title: 'CSS 动画专题'
}, {
  _id: '9fe3c0fd663460b00029fbf331441c5d',
  title: 'CSS 3D 专题'
}, {
  _id: '8d1a732f663461d60027187a544d13a3',
  title: '微信小程序实战'
}]

function Album(props: AlbumProps) {
  if (!props.initialize) {
    return <view></view>
  }

  const _view = {
    display: props.selected ? 'gird' : 'none'
  }

  return (
    <div id={s.wrapper} style={_view}>
      <NavigationBar title='合集' />
      <Placeholder type='wholeNavigationBar' />

      <JSCore />

      <AlbumCard
        title='React 19 全解'
        description='大量实战案例，全网第一本系统学习 React@19 的小册'
        _id={albums[0]._id}
      />

      <AlbumCard
        title='React 知命境'
        description='理论结合实践系统学习 React 核心架构与底层原理'
        _id={albums[1]._id}
      />

      <AlbumCard
        title='HarmonyOS 速成'
        description='一周时间掌握鸿蒙开发'
        _id={albums[3]._id}
      />

      <AlbumCard
        title='TypeScript 进阶宝典'
        description='精准把握核心脉络，轻松掌握'
        _id={albums[4]._id}
      />

      <AlbumCard
        title='CSS Animate'
        description='高级的前端，CSS 都很强'
        _id={albums[5]._id}
      />

      <AlbumCard
        title='微信小程序实战'
        description='拿捏小程序，才是顶尖高手'
        _id={albums[7]._id}
      />


      <Placeholder type='wholeTabbar' />
    </div>
  )
}

export default memo(Album);
